import {memo, useEffect}  from "react";
import type {FC,ReactNode} from "react";
import { useAppDispatch } from "@/store";
import {
    fetchBannerDataAction,
    fetchHotRecommendDataAction,
    fecthNewAlbumsDataAction,
    fecthTopRankingsDataAction,
    fecthSettleSingerDataAction
} from "./store";

import TopBanner from "./components/top-banner/index";
import HotRecommend from "./components/hot-recommend/index";
import NewAlbum from "./components/new-album/index";
import TopRanking from "./components/top-ranking/index";
import UserLogin from "./components/user-login/index";
import {RecommendWrapper} from "./style";
import SettleSinger from "./components/settle-singer";
import HotAnchor from "./components/hot-anchor";

interface IProps {
    children?:ReactNode
}

const Recommand:FC<IProps> = ()=>{
    // const [banners,setBanners] = useState([]);

    const dispatch = useAppDispatch();
    useEffect(()=>{
        dispatch(fetchBannerDataAction("Qilin"));
        dispatch(fetchHotRecommendDataAction());
        dispatch(fecthNewAlbumsDataAction());
        dispatch(fecthSettleSingerDataAction());
        dispatch(fecthTopRankingsDataAction());
        // 去除eslint警告
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);

    return (
        <RecommendWrapper>
            <TopBanner></TopBanner>
            <div className="content wrap-v2">
                <div className="left">
                    <HotRecommend />
                    <NewAlbum></NewAlbum>
                    <TopRanking></TopRanking>
                </div>
                <div className="right">
                    <UserLogin></UserLogin>
                    <SettleSinger></SettleSinger>
                    <HotAnchor></HotAnchor>
                </div>
            </div>
        </RecommendWrapper>
    )
}

export default memo(Recommand);
